<!--
 * @Author: lijing
 * @e-mail: 1413979079@qq.com
 * @LastEditors: lijing
 * @Date: 2020-04-23 21:03:25
 * @LastEditTime: 2020-04-25 14:32:10
 * @FilePath: \blog-pages\src\views\admin\InitBlog.vue
 * @Description: 初始化博客配置
-->

<template>
  <div class="con rounded">
    <h4 class="text-center text-secondary">初始化博客</h4>
    <b-form-group label="博客名称" class="text-muted">
      <b-form-input
        v-model="name"
        placeholder="请输入博客名称"
        :state="nameState"
        aria-describedby="name-feedback"
      ></b-form-input>
      <b-form-invalid-feedback id="name-feedback">博客名不能为空</b-form-invalid-feedback>
    </b-form-group>
    <b-form-group label="博客描述" class="text-muted">
      <b-form-input
        v-model="desc"
        placeholder="请输入博客描述"
        :state="descState"
        aria-describedby="desc-feedback"
      ></b-form-input>
      <b-form-invalid-feedback id="desc-feedback">博客描述不能为空</b-form-invalid-feedback>
    </b-form-group>
    <b-form-group label="博客图标" class="text-muted">
      <b-form-input
        v-model="icon"
        placeholder="请输入博客图标链接"
        :state="iconState"
        aria-describedby="icon-feedback"
      ></b-form-input>
      <b-form-invalid-feedback id="icon-feedback">博客图标不能为空</b-form-invalid-feedback>
    </b-form-group>
    <hr />
    <b-btn variant="outline-primary" @click="init" :disabled="!btnState">完成</b-btn>
  </div>
</template>
 
<script>
import urls from "@/request/url";
export default {
  name: "InitBlog",
  data() {
    return {
      name: "",
      desc: "",
      icon: ""
    };
  },
  computed: {
    nameState() {
      return this.name != "";
    },
    descState() {
      return this.desc != "";
    },
    iconState() {
      return this.icon != "";
    },
    btnState() {
      return this.nameState && this.descState && this.iconState;
    }
  },
  methods: {
    init() {
      this.$axios
        .post(urls.comm.initBlog, {
          blogName: this.name,
          blogDesc: this.desc,
          blogIcon: this.icon
        })
        .then(res => {
          this.$router.push("/init/profile");
        });
    }
  }
};
</script>
 
<style scoped>
.con {
  padding: 20px 40px;
  width: 350px;
  height: 450px;
  margin: auto;
  margin-top: 100px;
  background-color: #fff;

  border: 1px solid rgba(183, 183, 183, 0.47);
}
</style>
